<template>
<div class="query-subject">
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form ref="search" :inline="inline" class="demo-form-inline messageInput">
                    <el-form-item label="主体名称">
                        <el-input v-model="search['subjectInfo.subjectName']" placeholder="请输入"></el-input>
                    </el-form-item>
                    <mainType @on-change="getTypeId"></mainType>
                    <SelectTown @on-change="getTownId">镇街</SelectTown>
                    <SelectVillage @on-change="getVillageId" :townId="townId">乡村</SelectVillage>
                    <selectPageSystem @on-change="getChange">系统行业分类</selectPageSystem>
                    <el-from-item>
                        <el-button type="primary" @click="searchSubject">查询</el-button>
                        <el-button type="default" @click="resetSubject">重置</el-button>
                    </el-from-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-card class="el-card" shadow="never">
                <el-table :data="SubjectList" style="width: 100%">
                    <el-table-column prop="subjectName" label="主体名称" width="130">
                    </el-table-column>
                    <el-table-column prop="subjectLinkman" label="联系人" width="130">
                    </el-table-column>
                    <el-table-column prop="subjectAddr" label="主体地址" width="160">
                    </el-table-column>
                    <el-table-column prop="subjectTele" label="电话" width="130">
                    </el-table-column>
                    <el-table-column prop="landSubjectRs.length" label="地块数量" width="100">
                    </el-table-column>
                    <el-table-column prop="subjectBase" label="基地"> </el-table-column>
                    <el-table-column label="操作" fixed="right" width="50">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="currentchange" :current-page="paging.pageNum" :page-sizes="[5, 10, 20, 30, 40]" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog title="主体详情" append-to-body :visible.sync="subjectRowShow">
        <el-card>
            <Look :editor="true" :subjectFormRow="subjectFormRow"></Look>
        </el-card>
    </el-dialog>
</div>
</template>

<script>
export default {
    components: {
        Look: () => import("@/views/DataResource/ProductionBase/Look/Look.vue")
    },
    data: () => ({
        inline: true,
        subjectFormRow: {},
        subjectRowShow: false,
        search: {
            pageNumber: 1,
            pageSize: 5,
            "subjectInfo.subjectName": '',
            "subjectInfo.subjectType": '',
            "subjectInfo.subjectTownId": '',
            "subjectInfo.subjectVillageId": '',
            systemTypeList: ''
        },
        townId: "440605",
        SubjectList: [],
        paging: {}
    }),
    computed: {},
    created() {

    },
    methods: {
        handleClick(row) {
            this.subjectFormRow = row;
            this.subjectRowShow = true;
        },
        resetSubject() {
            this.townId = '440605'
            this.search = {
                pageNumber: 1,
                pageSize: 5,
                "subjectInfo.subjectName": '',
                "subjectInfo.subjectType": '',
                "subjectInfo.subjectTownId": '',
                "subjectInfo.subjectVillageId": '',
                systemTypeList: localStorage.getItem('SYS_TYPE')
            }
            this.searchSubject()
        },
        handleSizeChange(pageSize) {
            this.search.pageSize = pageSize
            this.searchSubject()
        },
        currentchange(pageNumber) {
            this.search.pageNumber = pageNumber;
            this.searchSubject()
        },
        searchSubject() {
            if (this.search["subjectInfo.subjectType"] === "P0200") {
                this.search["subjectInfo.subjectType"] = ''
            }
            if (this.search["subjectInfo.subjectTownId"] === "440605") {
                this.search["subjectInfo.subjectTownId"] = ''
            }
            if (this.search["subjectInfo.subjectVillageId"] === "440605") {
                this.search["subjectInfo.subjectVillageId"] = ''
            }
            this.$common.getSubjectInfoList(this.search)
                .then((res) => {
                    if (res.errorCode === '00000') {
                        this.SubjectList = res.data.list;
                        this.paging = {
                            pageNum: res.data.pageNum,
                            pageSize: res.data.pageSize,
                            total: res.data.total,
                        };
                    }
                })
        },
        getChange(arr) {
            this.search.systemTypeList = arr.join(',')
        },
        getTownId(id) {
            this.townId = id
            this.search["subjectInfo.subjectTownId"] = id
        },
        getVillageId(id) {
            if (id != this.search["subjectInfo.subjectTownId"]) {
                this.search["subjectInfo.subjectVillageId"] = id
            } else {
                this.search["subjectInfo.subjectVillageId"] = ""
            }
        },
        getTypeId(id) {
            this.search["subjectInfo.subjectType"] = id

        }
    },
    watch: {
        "search.systemTypeList": {
            handler(n, o) {
                this.searchSubject()
            },
            deep: true
        }
    },
};
</script>

<style></style>
